
if(!window.Berta) window.Berta = {};

Berta.Grid = new Class(function() {

	return {

		statics: {
			_instance: null, // Singleton instance
			instance: function(options) {
				if(!Berta.Grid._instance) {
					Berta.Grid._instance = new Berta.Grid(options);
				}

				return Berta.Grid._instance;
			}
		},


		// getter: returns event namespace for the instance
		namespace: function() { return '.Berta.Grid'; },

		constructor: function(options) {
			$.extend(true, this.options, options);
			//this.uploader = Berta.Server.Upload;
		},

		gridSpacingW: 20,
		gridSpacingH: 20,

		gridRendered: false,
		gridOn: false,



		//   .______    __    __  .______    __       __    ______    ////////////////////////////////////////////////////////////
		//   |   _  \  |  |  |  | |   _  \  |  |     |  |  /      |   ////////////////////////////////////////////////////////////
		//   |  |_)  | |  |  |  | |  |_)  | |  |     |  | |  ,----'   ////////////////////////////////////////////////////////////
		//   |   ___/  |  |  |  | |   _  <  |  |     |  | |  |        ////////////////////////////////////////////////////////////
		//   |  |      |  `--'  | |  |_)  | |  `----.|  | |  `----.   ////////////////////////////////////////////////////////////
		//   | _|       \______/  |______/  |_______||__|  \______|   ////////////////////////////////////////////////////////////

		on: function() {
			// Turn the grid on
			this._(render)();
			this.gridOn = true;

			//console.log($('.x-editable-on.x-editable-draggable'));
			var a = $('.x-editable-on.x-editable-draggable').bertaEditableOff().bertaEditableOn();
			//console.debug(a);
		},

		off: function() {
			// Turn the grid off
			if(this.gridOn) {
				this._(clearGrid)();
			}
			this.gridOn = false;;

			$('.x-editable-on.x-editable-draggable').bertaEditableOff().bertaEditableOn();
		},

		setSpacing: function(w, h) {

			this.gridSpacingW = w !== null ? parseInt(w) : this.gridSpacingW;
			this.gridSpacingH = h !== null ? parseInt(h) : this.gridSpacingH;
			if(this.gridOn) {
				this._(drawGrid)();
			}
		},

		coordsToGrid: function(el, pos) {
			if(typeof pos  === 'undefined') {
				pos = el.offset()
			} else {
				pos = jQuery.extend({}, pos);
				var offsetPos = $(el).offsetParent().offset();
				pos.left = pos.left + offsetPos.left;
				pos.top = pos.top + offsetPos.top;
			}

			pos.left = Math.round(pos.left / this.gridSpacingW) * this.gridSpacingW;
			pos.top = Math.round(pos.top / this.gridSpacingH) * this.gridSpacingH;

			return pos;
		}

	};



	//   .______   .______     __  ____    ____  ___   .___________. _______    //////////////////////////////////////////////////
	//   |   _  \  |   _  \   |  | \   \  /   / /   \  |           ||   ____|   //////////////////////////////////////////////////
	//   |  |_)  | |  |_)  |  |  |  \   \/   / /  ^  \ `---|  |----`|  |__      //////////////////////////////////////////////////
	//   |   ___/  |      /   |  |   \      / /  /_\  \    |  |     |   __|     //////////////////////////////////////////////////
	//   |  |      |  |\  \--.|  |    \    / /  _____  \   |  |     |  |____    //////////////////////////////////////////////////
	//   | _|      | _| `.___||__|     \__/ /__/     \__\  |__|     |_______|   //////////////////////////////////////////////////

	var gridContainer, paper, gridPath;

	function render() {
		if(!this.gridRendered) {
			gridContainer = $('<div class="x-grid-container"></div>').prependTo('body');
			paper = Raphael(gridContainer.get(0), '100%', '100%');
		}

		this._(drawGrid)();
	}

	function drawGrid() {
		var pathString = '', c,
			paperW = gridContainer.width(), paperH = gridContainer.height();

		// Clear previously created grid
		clearGrid();

		//console.log(this.gridSpacingW, this.gridSpacingH);

		// Horizontal lines
		c = 0.5;
		while(c < paperH) {
			pathString += 'M 0 ' + c + ' L ' + paperW + ' ' + c + ' ';
			c += this.gridSpacingH;
		}

		// Vertical lines
		c = 0.5;
		while(c < paperW) {
			pathString += 'M ' + c + ' 0 L ' + c + ' ' + paperH + ' ';
			c += this.gridSpacingW;
		}

		// Render
		gridPath = paper.path(pathString).attr({
			'stroke-width': 0.1,
			'stroke': '#000'
		});
	}

	function clearGrid() {
		if(gridPath) {
			gridPath.remove();
		}
		gridPath = null;
	}

	function drawGuide() {

	}


}());


